import * as echarts from 'echarts';
const gradientCircleLine = (data) => {
  const line = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "#57617B",
        },
      },
    },
    legend: {
      show: false,
      icon: "rect",
      itemWidth: 14,
      itemHeight: 5,
      itemGap: 13,
      data: ["家"],
      right: "4%",
      textStyle: {
        fontSize: 12,
        color: "#F1F1F3",
      },
    },
    grid: {
      top: "20%",
      left: "3%",
      right: "4%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: "#ddd",
          },
        },
        data: data.date,
      },
      {
        axisPointer: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#ddd",
          },
        },
        axisTick: {
          show: false,
        },

      },
    ],
    yAxis: [
      {
        type: "value",
        name: data.name,
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#ddd",
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            fontSize: 14,
          },
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: "#57617B",
          },
        },
      },
    ],
    series: [
      {
        name: "企业数",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 5,
        showSymbol: false,
        lineStyle: {
          normal: {
            width: 1,
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: data.color + '55',
                },
                {
                  offset: 0.8,
                  color: data.color + '00',
                },
              ],
              false
            ),
            shadowColor: "rgba(0, 0, 0, 0.1)",
            shadowBlur: 10,
          },
        },
        itemStyle: {
          normal: {
            color: data.color,
            borderColor: "rgba(137,189,2,0.27)",
            borderWidth: 12,
          },
        },
        data: data.data,
      },

    ],
  };
  const opt = Object.assign({}, line);
  return opt;
}

const gradientCircleLineDynami = (data) => {
  let seriesList = [];
  let yList = [];
  for (var i = 0; i < data.name.length; i++) {
    let seriesData = {
      name: data.name[i],
      type: "line",
      smooth: true,
      symbol: "circle",
      yAxisIndex: i,
      symbolSize: 5,
      showSymbol: false,
      lineStyle: {
        normal: {
          width: 1,
        },
      },
      areaStyle: {
        normal: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: data.color[i] + '44',
              },
              {
                offset: 0.6,
                color: data.color[i] + '00',
              },
            ],
            false
          ),
          shadowColor: "rgba(0, 0, 0, 0.1)",
          shadowBlur: 10,
        },
      },
      itemStyle: {
        normal: {
          color: data.color[i],
          borderColor: "rgba(137,189,2,0.27)",
          borderWidth: 12,
        },
      },
      data: data.data[i],
    };
    seriesList.push(seriesData);
  }
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        lineStyle: {
          color: "#57617B",
        },
      },
    },
    legend: {
      icon: "circle",
      top: "5%",
      right: "5%",
      itemWidth: 6,
      itemGap: 20,
      textStyle: {
        color: "#ddd",
      },
    },
    grid: {
      left: "10%",
      right: "10%",
      bottom: "3%",
      containLabel: true,
    },
    xAxis: [
      {
        type: "category",
        boundaryGap: false,
        axisLine: {
          lineStyle: {
            color: "#ddd",
          },
        },
        data: data.date,
      },
      {
        axisPointer: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            color: "#ddd",
          },
        },
        axisTick: {
          show: false,
        },

      },
    ],
    yAxis: [
      {
        type: "value",
        name: "耗电量(kwh)",
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#ddd",
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            fontSize: 14,
          },
        },
        splitLine: {
          lineStyle: {
            type: 'dashed',
            color: "#57617B",
          },
        },
      },
      {
        type: "value",
        name: "耗水量(m³)",
        position: "right",
        axisTick: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#ddd",
          },
        },
        axisLabel: {
          margin: 10,
          textStyle: {
            fontSize: 14,
          },
          formatter: "{value}",
        },
        splitLine: {
          show: false,
          lineStyle: {
            type: 'dashed',
            color: "#57617B",
          },
        },
      }
    ],
    series: seriesList,
  };
  const opt = Object.assign({}, option);
  return opt;
}


export default {
  gradientCircleLine,
  gradientCircleLineDynami
}
